<template>
  <div class="card">
    <a-form-model layout="inline" >
      <a-form-model-item >
          <a-input  v-model="name" allowClear placeholder="银行名称"></a-input>
      </a-form-model-item>
      <a-form-model-item >
        <a-select  allowClear v-model="region" style="width: 150px;" placeholder="请选择区域">
          <a-select-option v-for="(item,index) in regionArrs" :key="index" :value="item.id">{{ item.name }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item >
        <a-button type="primary" @click="getDataList">查询</a-button>
      </a-form-model-item>
      <a-form-model-item >
        <a-button @click="name='',region='全国',getDataList">重置</a-button>
      </a-form-model-item>
    </a-form-model >
    
    <a-spin :spinning="loading" >
      <a-table
        bordered
        :columns="columns"
        :data-source="tableData"
        :rowKey="(record, index) => index"
        :pagination="pagination"
        @change="pagination=$event,getDataList()"
      >
        <span slot="image" slot-scope="text">
          <viewer :images="[text]">
            <img width="50px" height="50px" :src="text" alt="" />
          </viewer>
        </span>
        <span slot="colors" slot-scope="text">
          <div class="colors" :style="{background:text}"></div>
        </span>
        <span slot="caozuo" slot-scope="text, record">
          <a-button type="link" @click="showDioGlas(record)">修改</a-button>
        </span>
      </a-table>
    </a-spin>
    <writeBankDiogla ref="writeBankDiogla" @changes="getDataList"></writeBankDiogla>
  </div>
</template>

<script>
import { getBankDickListApi } from '@/api/dict.js'
import writeBankDiogla from "./diogla/writeBankDiogla.vue"
export default {
  name: 'bank',
  components: {
    writeBankDiogla
  },
  data() {
    return {
      loading: false,
      name:"",
      region:"全国",
      regionArrs:[
        {id:"全国",name:"全国"},
        {id:"区域",name:"区域"},
      ],
      tableData: [],
      pagination:{
        total:0,
        current:1,
        pageSize:50,
      },
      columns: [
        {
          title: '银行名称',
          dataIndex: 'name',
          align: 'center'
        },
        {
          title: '银行logo',
          dataIndex: 'logo',
          align: 'center',
          scopedSlots: { customRender: 'image' }
        },
        {
          title: '背景色',
          dataIndex: 'background_color',
          align: 'center',
          scopedSlots: { customRender: 'colors' }
        },
        {
          title: '区域',
          dataIndex: 'region',
          align: 'center',
        },
        {
          title: '操作',
          align: 'center',
          scopedSlots: { customRender: 'caozuo' }
        }
      ]
    }
  },
  created() {
    this.getDataList()
  },
  computed:{
  },
  methods: {
    showDioGlas(json){
      this.$refs.writeBankDiogla.openwriteBankDiogla(json)
    },


    async getDataList() {
      this.loading = true
      this.selectedArrIds=[]
      try {
        var json={
          page:  this.pagination.current,
          page_size:  this.pagination.pageSize,
        brand_id: process.env.VUE_APP_BRAND_ID,
          search:{
            name:this.name,
            region:this.region,
          }
        }
        const { data } = await getBankDickListApi(json)
        this.tableData = data.list
        this.pagination.total = data.total
      } finally {
        this.loading = false
      }
    },
  }
}
</script>

<style lang="less" scoped>
.colors {
  width: 50px;
  height: 50px;
}
</style>
